<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shopping cart</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="jee tutorial, Java, web applications, JSP, session, scriptlet">
<meta name="description" content="In this part of the Java EE 5 tutorial, we create a skeleton of a shopping cart.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Shopping cart</h1>

<p>
In this part of the JEE tutorials, we will create a simple skeleton of a 
shopping cart. We will demonstrate how to use a session object in jsp. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 


<p>
The <b>http</b> protocol is a stateless protocol. It does not retain 
information between requests from 
the clients. To overcome this deficiency, the developers can use 
<b>cookies</b>, hidden variables, url encoded parameters or <b>sessions</b>.
</p>


<h2>Shopping cart</h2>


<p>
When we create a shopping cart in our application, we have to store user's 
state. For example, we put a book in books.jsp
page into our cart then move to cds.jsp and want to select another item. 
We must retain all information about books, that 
have been put into the shopping cart. Every jsp page has an implicit 
<b>session</b> object that we can use.
This object is an instance of <code>HttpSession</code> class, 
which handles all details behind storing and retrieving session data.
</p>

<p>
We have three jsp pages in our example. index.jsp will add items to the 
shopping cart. The remove.jsp will remove
items from the cart. The cart.jsp will display items in the shopping cart. 
</p>

<div class="codehead">index.jsp</div>
<pre class="code">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Shopping cart&lt;/title&gt;
&lt;style&gt;
* { font-size: 12px; font-family: Verdana }
input { border: 1px solid #ccc }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;jsp:declaration&gt;
java.util.Enumeration parms;
java.util.Enumeration values;
&lt;/jsp:declaration&gt;

&lt;jsp:scriptlet&gt;
parms = request.getParameterNames();
values = request.getParameterNames();


while(parms.hasMoreElements()) {
    String name = (String) parms.nextElement();
    String value = (String) values.nextElement();
    session.setAttribute(name, value);
}

&lt;/jsp:scriptlet&gt;


&lt;img src="images/add.png" onclick="document.location='index.jsp'"&gt;
&lt;img src="images/remove.png" onclick="document.location='remove.jsp'"&gt;
&lt;img src="images/cart.png" onclick="document.location='cart.jsp'"&gt;


&lt;h2&gt;Add to shopping cart&lt;/h2&gt;

&lt;form method="get" action="index.jsp"&gt;

&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" &lt;% if (session.getAttribute("scissors") != null) 
out.print("checked"); %> name="scissors"&gt;&lt;/td&gt;
&lt;td&gt;Scissors&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" &lt;% if (session.getAttribute("book") != null)
 out.print("checked"); %> name="book"&gt;&lt;/td&gt;
&lt;td&gt;Book&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" &lt;% if (session.getAttribute("pen") != null)
 out.print("checked"); %> name="pen"&gt;&lt;/td&gt;
&lt;td&gt;Pen&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" &lt;% if (session.getAttribute("bottle") != null)
 out.print("checked"); %> name="bottle"&gt;&lt;/td&gt;
&lt;td&gt;Bottle&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" &lt;% if (session.getAttribute("glass") != null)
out.print("checked"); %> name="glass"&gt;&lt;/td&gt;
&lt;td&gt;Glass&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;br&gt;&lt;br&gt;
&lt;input type="submit" value="submit"&gt;
&lt;/form&gt;


&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>
The index.jsp is used to add items to the shopping cart. 
</p>

<pre class="explanation">
&lt;jsp:declaration&gt;
java.util.Enumeration parms;
java.util.Enumeration values;
&lt;/jsp:declaration&gt;
</pre>

<p>
This is the declatration tag. Variable declared here are available in 
jsp expressions and scriptlets.
</p>

<pre class="explanation">
&lt;jsp:scriptlet&gt;
parms = request.getParameterNames();
values = request.getParameterNames();


while(parms.hasMoreElements()) {
    String name = (String) parms.nextElement();
    String value = (String) values.nextElement();
    session.setAttribute(name, value);
}

&lt;/jsp:scriptlet&gt;
</pre>

<p>
In this scriptlet, we get all the parameters from the request and 
put them into the session.
</p>

<pre class="explanation">
&lt;form method="get" action="index.jsp"&gt;
</pre>

<p>
We can use the same file that sends the form data to process the data. 
</p>

<pre class="explanation">
&lt;td&gt;&lt;input type="checkbox" &lt;% if (session.getAttribute("scissors") != null) 
out.print("checked"); %> name="scissors"&gt;&lt;/td&gt;
</pre>

<p>
The scriptlet embedded in this html code controls, whether to check 
the checkbox or not. I depends upon whether the item is already in session or not.
</p>

<div class="codehead">cart.jsp</div>
<pre class="code">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Shopping cart&lt;/title&gt;
&lt;style&gt;
* { font-size: 12px; font-family: Verdana }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;img src="images/add.png" onclick="document.location='index.jsp'"&gt;
&lt;img src="images/remove.png" onclick="document.location='remove.jsp'"&gt;
&lt;img src="images/cart.png" onclick="document.location='cart.jsp'"&gt;


&lt;h2&gt;The shopping cart&lt;/h2&gt;

&lt;jsp:scriptlet>&lt;![CDATA[ 
java.util.Enumeration content = session.getAttributeNames();

while (content.hasMoreElements()) {
    out.println(content.nextElement());
    out.println("&lt;br&gt;");
}

 ]]&gt;&lt;/jsp:scriptlet&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>
The cart.jsp displays the content of the shopping cart. 
</p>

<pre class="explanation">
 &lt;jsp:scriptlet>&lt;![CDATA[ 
 java.util.Enumeration content = session.getAttributeNames();

 while (content.hasMoreElements()) {
     out.println(content.nextElement());
     out.println("&lt;br&gt;");
 }

  ]]&gt;&lt;/jsp:scriptlet&gt;
</pre>

<p>
This scriptlet displays items in the cart. Notice the &lt;![CDATA[  ... ]]&gt; In this example, 
if we use scriplets in xml format, we have to put the &lt;![CDATA[  ... ]]&gt; into the 
scriptlet body. It is because we print the &lt;br&gt; tag. Otherwise the jsp won't compile.
</p>


<div class="codehead">remove.jsp</div>
<pre class="code">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Shopping cart&lt;/title&gt;
&lt;style&gt;
* { font-size: 12px; font-family: Verdana }
input { border: 1px solid #ccc }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;jsp:declaration&gt;
java.util.Enumeration parms;
&lt;/jsp:declaration&gt;

&lt;jsp:scriptlet&gt;
parms = request.getParameterNames();

while(parms.hasMoreElements()) {
    String name = (String) parms.nextElement();
    session.removeAttribute(name);
}

&lt;/jsp:scriptlet&gt;


&lt;img src="images/add.png" onclick="document.location='index.jsp'"&gt;
&lt;img src="images/remove.png" onclick="document.location='remove.jsp'"&gt;
&lt;img src="images/cart.png" onclick="document.location='cart.jsp'"&gt;

&lt;h2&gt;Remove items from cart&lt;/h2&gt;

&lt;form method="get" action="remove.jsp"&gt;

&lt;table&gt;
&lt;% if (session.getAttribute("scissors") != null) { %&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" name="scissors"&gt;&lt;/td&gt;&lt;td&gt;Scissors&lt;/td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;% } %&gt;
&lt;% if (session.getAttribute("book") != null) { %&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" name="book"&gt;&lt;/td&gt;&lt;td&gt;Book&lt;/td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;% } %&gt;
&lt;% if (session.getAttribute("pen") != null) { %&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" name="pen"&gt;&lt;/td&gt;&lt;td&gt;Pen&lt;/td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;% } %&gt;
&lt;% if (session.getAttribute("bottle") != null) { %&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" name="bottle"&gt;&lt;/td&gt;&lt;td&gt;Bottle&lt;/td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;% } %&gt;
&lt;% if (session.getAttribute("glass") != null) { %&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" name="glass"&gt;&lt;/td&gt;&lt;td&gt;Glass&lt;/td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;% } %&gt;
&lt;/table&gt;
&lt;br&gt;&lt;br&gt;
&lt;input type="submit" value="submit"&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>


<p>
The remove.jsp file removes items from the shopping cart. 
</p>


<pre class="explanation">
 &lt;jsp:scriptlet&gt;
 parms = request.getParameterNames();

 while(parms.hasMoreElements()) {
     String name = (String) parms.nextElement();
     session.removeAttribute(name);
 }
&lt;/jsp:scriptlet&gt;
</pre>

<p>
This scriptlet removes items from the cart.
</p>

<pre class="explanation">
&lt;% if (session.getAttribute("scissors") != null) { %&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" name="scissors"&gt;&lt;/td&gt;&lt;td&gt;Scissors&lt;/td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;% } %&gt;
</pre>

<p>
This code displays scissors input tag only if it is present in the session.
</p>

<img src="/img/java/jee/remove.jpg" alt="remove.jsp">
<div class="figure">Figure: remove.jsp</div>

<p>
A shopping cart skeleton to demonstrate session object.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 13, 2008  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
